<!--  -->
<template>
	<div class="bbx-base-tab-bar-box">
		<div class="bbx-base-tab-list">
			<div ref="listItem" class="bbx-base-tab-list-item" @click="changeItem(item, index)"
				:class="[nowItem == item[listItemKey] ? 'is-select' : '']" v-show="item[showKey]" v-for="(item, index) in barList" :key="item[listItemKey]">
				<slot :name="`tabitem-${item[listItemKey]}`" v-bind:tabs="item">
					<span class="overHideCon-1">{{ item[labelKey] }}</span>
				</slot>
			</div>
		</div>
		<div>
			<el-popover placement="bottom-start" popper-class="right-tab-selector-popover" trigger="click">
				<el-button slot="reference" type="ghost" class="right-tab-selector mar-r-24">
					<i class="iconfont icon-gaojisousuo font-12"></i>
				</el-button>
				<div class="bbx-base-tab-bar-check-box">
					<div class="bbx-base-tab-bar-check-title">{{ updateTipsChineseText }}</div>
					<draggable tag="div" :list="barList" :group="{ name: 'g1' }" handle=".handle" @end="upDateBarList('sort')">
						<div class="bbx-base-tab-bar-check-item can-move handle" draggable="true" v-for="item in barList" :key="item[listItemKey]">
							<el-checkbox class="flex-1" :disabled="item.disabled" :label="item[labelKey]" v-model="item[showKey]" @change="upDateBarList('select')">
								<span class="overHideCon-1">{{ item[labelKey] }}</span>
							</el-checkbox>
							<i class="iconfont icon-tuozhuaipaixu font-14 mar-r-8"></i>
						</div>
					</draggable>
				</div>
			</el-popover>
		</div>

	</div>
</template>

<script>
import draggable from 'vuedraggable';
import { debounce } from 'lodash'
import { BaseTabBarUsualEnum } from '@src/component/common/BaseTabBar/enum'
import { t } from '@src/locales'
export default {
	props: {
		barList: {
			type: Array,
			default: () => ([])
		},
		nowItem: {
			type: [String, null],
			default: null
		},
		trackConfig: {
			type: Object,
			default: () => ({})
		},
		module: {
			type: String,
			default: ''
		}
	},
	watch: {
		'barList': {
			handler (newValue) {
				// console.log(newValue)
			},
			deep: true,
			immediate: true,
		},
		nowItem(newVal){
      this.checkNowItem(newVal)
    }
	},
	data () {
		return {
			listItemKey: BaseTabBarUsualEnum.TabBarListItemKey,
			showKey: BaseTabBarUsualEnum.TabBarListItemShow,
			selectKey: BaseTabBarUsualEnum.TabBarListItemSelect,
			labelKey: BaseTabBarUsualEnum.TabBarListItemLabel,
			updateTipsChineseText: t('common.base.chooseShowItem')
		}
	},
	components: {
		draggable
	},
	methods: {
		changeItem (item, index) {
			this.$refs.listItem[index].scrollIntoView({ behavior: 'instant' })
			this.$emit('changeItem', item)
			item.needTrack && this.$track.clickStat(this.$track.formatParams('DETAIL_ADD_ONS_TABS', item[this.labelKey]));
		},
		/**
		 * @des 当缓存发生改变时触发（位置移动、显隐变化）
		 */
		upDateBarList: debounce(function (type) {
			
			if(type === 'select'){
				// 当前选项如果被取消显示需要选择到disabled项
				let nowCheckItem =  this.barList.find(item=>item[this.listItemKey] == this.nowItem);
				if(!nowCheckItem[this.showKey]){
					let disabledIndex = this.barList.findIndex(item=>item.disabled);
					disabledIndex > -1 && this.changeItem(this.barList[disabledIndex], disabledIndex)
				}
			}
			this.$emit('upDateBarList', this.barList)
			this.defaultTrack(type)
		}, 300),

		defaultTrack(type) {
			const { ifTrack } = this.trackConfig
			const trackSecondId = ({
				select: 'FILTER_ADD_ONS_SELECT',
				sort: 'FILTER_ADD_ONS_SORT',
			})[type]

			this.module && ifTrack && this.$track.clickStat(this.$track.formatParams(`${trackSecondId}_${this.module}`, null, trackSecondId));
		},

    /**
		 * @des 检查当前选项是否在list中
		 */
		 checkNowItem(checked){
      this.barList.map(item=>{
        if(item[this.listItemKey] === checked){
          item[this.showKey] = true;
          item[this.selectKey] = true;
        }
        return item;
      })
    }
	}
}
</script>
<style lang="scss" scoped>
$tab-item-height:40px;
.bbx-base-tab-bar-box {
	position: sticky;
	top: 0;
	display: flex;
	width: 100%;
	// border-bottom: 2px solid $border-color-base;
	align-items: baseline;
	box-sizing: border-box;
	z-index: 35;
	background-color: #fff;

	&::after {
		content: '';
		width: 100%;
		border-bottom: 1px solid #E4E7ED;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 99;
	}

	.bbx-base-tab-list {
		display: flex;
		align-items: center;
		flex: 1;
		flex-wrap: wrap;
		max-height: 120px;
		overflow-y: auto;
		min-height: $tab-item-height;

		.bbx-base-tab-list-item {
			flex-wrap: wrap;
			max-width: 100%;
			margin: 0 24px;
			height: $tab-item-height;
			line-height: $tab-item-height;
			position: relative;
			cursor: pointer;
		}

		.is-select {
			color:$color-primary;
			&::after {
				content: '';
				width: 100%;
				height: 2px;
				background-color: $color-primary;
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 101;
			}
		}

	}

	.right-tab-selector {
		display: flex !important;
		align-items: center;
		justify-content: center;
		display: inline;
		padding: 0;
		min-width: auto;
		z-index: 10;
		width: 24px;
		height: 24px;
		margin-right: 12px;
		border: 1px solid transparent;
		cursor: pointer;
		border-radius: 4px;

		&:hover,
		&:active,
		&:focus {
			background-color: #fff;
			border-color: $color-primary;
			color: $color-primary;
		}

		i {
			font-size: 12px;
		}
	}

}
</style>
<style lang='scss'>
.right-tab-selector-popover {
	padding: 0;
	min-width: 198px;
	max-width: 331px;

	.el-popover__title {
		padding: 0 12px;
		height: 38px;
		line-height: 38px;
		background: #F5F5F5;
		color: rgba(0, 0, 0, 0.65);
		margin-bottom: 0;
	}

	&>.popper__arrow:after {
		border-bottom-color: #f5f5f5;
	}
}

.bbx-base-tab-bar-check-box {
	min-width: 198px;
	max-width: 331px;
	max-height: 400px;
	min-height:90px;
	overflow-y: auto;

	.bbx-base-tab-bar-check-title {
		padding: 0 12px;
		height: 38px;
		line-height: 38px;
		background: #F5F5F5;
		color: rgba(0, 0, 0, 0.65);
		font-size: 16px;
		position: sticky;
		top: 0;
		z-index: 66;
	}

	.bbx-base-tab-bar-check-item {
		display: flex;
		align-items: center;
		padding-top: 8px;

		&:last-child {
			padding-bottom: 8px;
		}

		.el-checkbox {
			width: fit-content;
			width: auto;
			display: flex;
			align-items: center;
			height: 32px;
			padding: 0 12px;
			margin: 0;

			.el-checkbox__input {
				line-height: 0;
			}

			.el-checkbox__label {
				text-overflow: ellipsis;
				overflow: hidden;
				color: rgba(0, 0, 0, 0.85);
				max-width: 290px;
			}

			&.is-checked {
				.el-checkbox__label {
					color: rgba(0, 0, 0, 0.85);
				}
			}

			&.is-disabled {
				// .el-checkbox__inner {
				// 	background-color: #fff !important;
				// 	border-color: rgba(126, 134, 142, 0.16) !important;
				// }

				// .el-checkbox__label {
				// 	color: #BFBFBF;
				// }
				.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{
					border-color: $text-color-secondary;
				}
			}
		}
	}
}
</style>